// 引入mian组件样式
import './main.css';
// 从tab中引入Tab类
import Tab from '../tab';
// 从content中引入Ccontent类
import Content from '../content';
// 从sessionStorage中引入set和get方法
import {set,get} from 'utils/sessionStorage';

const contentEl=document.getElementById('destination-content');
const tabEl=document.getElementById('tab');
// 创建Tab类实例
const tab =new Tab (tabEl);
// 创建Content类实例
const content =new Content (contentEl);
// tabEl元素添加鼠标点击响应事件
tabEl.addEventListener('click',(e)=>{
    // 设置index为当前点击元素的data-n属性的值减1
    const index=e.target.dataset.n-1;
    // 设置storageContent为sessionStorage键名为当前"index"的键值 
    const storageContent=get(index);
    // 如果storageContent的值不为空值，说明已经添加了键名为当前index的sessionStorage
    if (storageContent) {
        tab.setActiveItem(index);
        // 调用content的set方法，参数为storageContent
        content.set(storageContent);
    } else {
        // 如果storageContent的值为空值,说明还没有已经添加了键名为当前index的sessionStorage
        (tab.to(index)).then((data)=>{
            // 设置键名为当前index，且键值为返回的data对象
            set(index,data);
            // 调用content的set方法，参数为返回的data对象
            content.set(data);
        });
    }
},false)
// 默认tabEl的一个子元素执行一次鼠标点击事件
tabEl.querySelector('.tab-item').click();